<template>
  <!-- <HeaderNav /> -->
  <div class="full">
    <div class="container">
      <div class="header"></div>
      <div class="video-content">
        <div class="videos">
          <!-- 左边 -->
          <div class="video-left">
            <VideoPlay
              @sendMid="setMid"
              :aid="Number(route.query.aid)"
              :bvid="route.query.bvid as string"
            />
            <!-- 官方活动 -->
            <div class="inside-wrap">
              <div class="inside-left">
                <b class="left-info">分享居住故事，赢惊喜好礼</b>
              </div>
              <div class="inside-right">
                <a class="left-img" href="javascript:;">
                  <img
                    class="img"
                    src="../Video/videoimages/0e0740b250141a0911ad27dbbce2e77450d7c578.png"
                    alt=""
                  />
                </a>
              </div>
            </div>
            <Commend :aid="Number(route.query.aid)" :bvid="route.query.bvid as string" />
          </div>

          <!-- 右边 -->
          <div class="video-right">
            <!-- up主信息 -->
            <div class="up-recommend">
              <!-- up主头像 -->
              <div class="up-avatar">
                <a href="javascript:;">
                  <div class="up-img">
                    <img class="img" :src="uperBaseInfo.face" alt="" />
                    <span class="up-identify">@</span>
                  </div>
                </a>
              </div>
              <!-- up主详情 -->
              <div class="up-info">
                <div class="up-message">
                  <a class="up-name" href="javascript:;">{{ uperBaseInfo.name }}</a>
                  <a class="send-message" href="javascript:;">
                    <span class="message iconfont icon-24gf-envelope"></span>发消息
                  </a>
                </div>
                <div class="up-tip">{{ uperBaseInfo.sign }}</div>
                <div class="add-visitor">
                  <div class="visitor-container">
                    <span class="visitor-number">
                      <i class="visitor-add">+</i>
                      <span class="visitor">关注{{ localNum(uperFansInfo.card?.fans, 1) }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <CommendList />
            <!-- 广告 -->
            <div class="advertisement-container">
              <div class="advertisement">
                <img
                  src="./videoimages/b16398e01085cc874936a504c35d03a40063279e.jpg@96w_96h_1c_1s.webp"
                  alt=""
                />
              </div>
              <div class="advertisement-title">
                <span class="title">每天建模半小时，在家接单赚钱养活自己</span>
                <div class="advertisement-tip">
                  <div class="advertisement-tag">广告</div>
                  <span class="advertisement-context">零基础学习游戏建模</span>
                </div>
              </div>
            </div>
            <Recommend :aid="Number(route.query.aid)" :bvid="route.query.bvid as string" />
            <!-- 广告 -->
            <div class="game-recommend">
              <a class="game" href="javascript:;">
                <img
                  class="game-img"
                  src="./videoimages/3729d6f2472052b22b599502ae67af4cdf9f1e24.png"
                  alt=""
                />
              </a>
              <span class="game-title">分享手办模玩，瓜分15万现金！</span>
            </div>
            <!-- 推荐直播 -->
            <div class="live">
              <div class="live-like">大家围观的直播</div>
              <div class="live-up">
                <div class="appeal"></div>
                <div class="live-img">
                  <img
                    class="img"
                    src="./videoimages/9027de9f3da7b6350c06e11386f19cc87079ec14.jpg@423w_264h.webp"
                    alt=""
                  />
                </div>
                <div class="live-avatar">
                  <div class="live-info">
                    <div class="live-url" alt=""></div>
                  </div>
                  <div class="live-desc">
                    <p class="desc-title">10400F+3060电竞之心6099</p>
                    <p class="desc-tip">
                      <span class="desc-icon">@邻家小阿妹</span>
                      <span class="desc-icon">@6972</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- ./components/Commend.vue -->
<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { useRoute } from 'vue-router'
  export default defineComponent({
    name: 'Video',
  })
</script>

<script lang="ts" setup>
  // import HeaderNav from '../../components/HeaderBar/index.vue'
  import Commend from './components/commend.vue'
  import VideoPlay from './components/videoPlay.vue'
  import CommendList from './components/commendList.vue'
  import Recommend from './components/recommend.vue'
  import { localNum } from '@/utils/lib'
  import { reqUserInfo, reqUserCard } from '@/api/personal'
  import type { UserInfo, InfoCard } from '@/api/personal'

  const uperBaseInfo = ref<Partial<UserInfo>>({})
  const uperFansInfo = ref<Partial<InfoCard>>({})

  const setMid = (mid: number) => {
    // eslint-disable-next-line
    ;(async function () {
      uperBaseInfo.value = await reqUserInfo(mid)
    })()
    ;(async function () {
      uperFansInfo.value = await reqUserCard(mid)
    })()
  }

  const route = useRoute()
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2978613_dw7o84n8zo.css');
</style>

<style lang="less" scoped>
  .full {
    width: 100%;
    min-width: 1200px;
    margin-top: 56px;
    padding-bottom: 50px;

    .container {
      margin: 0px auto;
      width: 1200px;
      .videos {
        display: flex;
        .video-left {
          width: 854px;
          height: 100%;

          .inside-wrap {
            display: flex;
            justify-content: space-around;
            width: 854px;
            height: 150px;
            border: 1px solid #ccc;
            .inside-left {
              width: 427px;
              height: 150px;
              margin-left: 20px;
              .left-info {
                line-height: 150px;
                font-size: 20px;
                font-weight: bold;
                color: #222;
              }
            }
            .inside-right {
              width: 427px;
              height: 100%;
              .left-img {
                .img {
                  width: 426px;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }

    .videos .video-right {
      width: 320px;
      margin-left: 30px;
      .up-recommend {
        display: flex;
        padding-top: 15px;
        padding-bottom: 12px;
        .up-avatar {
          .up-img {
            position: relative;
            .img {
              width: 48px;
              height: 48px;
              border-radius: 50%;
            }
            .up-identify {
              position: absolute;
              right: 0;
              bottom: 5px;
              border-radius: 50%;
              background-color: yellow;
            }
          }
        }
        .up-info {
          margin-left: 12px;
          .up-message {
            .up-name {
              color: pink;
              font-size: 14px;
            }
            .send-message {
              margin-left: 12px;
              font-size: 12px;
              .message {
                margin-right: 4px;
                color: #505050;
              }
            }
          }
          .up-tip {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-top: 4px;
            font-size: 12px;
            color: #999;
          }
          .add-visitor {
            width: 256px;
            height: 27px;
            margin-top: 5px;
            .visitor-container {
              width: 146px;
              height: 27px;
              line-height: 20px;
              text-align: center;
              background-color: #00a1d6;
              color: #fff;
              font-size: 14px;
              border-radius: 2px;
              cursor: pointer;

              .visitor-add {
                margin-right: 10px;
                font-size: 24px;
              }
            }
          }
        }
      }
      .advertisement-container {
        display: flex;
        margin-bottom: 20px;
        .advertisement img {
          margin-right: 10px;
        }
        .advertisement-title {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .title {
            font-size: 14px;
            color: #222;
          }
          .advertisement-tip {
            display: flex;
            width: 169px;
            height: 17px;
            color: #999;
            .advertisement-tag {
              margin-right: 6px;
              font-size: 12px;
              border: 1px solid #999;
              border-radius: 3px;
            }
            .advertisement-context {
              font-size: 12px;
            }
          }
        }
      }
      .game-recommend {
        position: relative;
        cursor: pointer;
        .game-title {
          position: absolute;
          left: 10px;
          top: 130px;
          color: #fff;
          font-size: 12px;
        }
      }
      .live {
        margin-top: 25px;
        cursor: pointer;
        .live-like {
          width: 360px;
          height: 16px;
          font-size: 16px;
        }
        .live-up {
          width: 318px;
          margin-top: 20px;
          border: 1px solid #ccc;
          .appeal {
            &:hover {
              top: 0;
              left: 0;
              width: 318px;
              height: 179px;
              background: rgba(0, 0, 0, 0.4);
              border-radius: 4px 4px 0 0;
              opacity: 0;
              // visibility: hidden;
              transition: all 0.2s linear;
            }
          }
          .live-img {
            .img {
              width: 318px;
              height: 179px;
            }
          }
          .live-avatar {
            display: flex;
            .live-info {
              padding: 12px;
              .live-url {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background-image: url('./videoimages/9027de9f3da7b6350c06e11386f19cc87079ec14.jpg@423w_264h.webp');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
            .live-desc {
              padding: 12px 12px 12px 10px;
              .desc-title {
                font-size: 14px;
              }
              .desc-tip {
                margin-top: 10px;
                .desc-icon {
                  font-size: 12px;
                  color: #ccc;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
